<template>
    <div>
        <!-- 输入框 -->
        <el-input
            v-model="textarea"
            maxlength="120"
            placeholder="请输入文本内容"
            show-word-limit
            class="chat-input"
            @keyup.enter.native="sendMessage"
        >
            <template #prefix>
                <el-icon size="25px" class="file-icon">
                    <Folder @click="handleClick" />
                </el-icon>
            </template>
        </el-input>
    </div>

    <FileSelect/>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import {chatStore} from '@/stores/disk/chat';
import FileSelect from '@/components/chat/FileSelect.vue';
const textarea = ref('');
const chatStor = chatStore();

//点击文件图标弹出文件选择弹窗
const handleClick = () => {
    chatStor.showFileSelectAll(true)
}
//发送消息
const sendMessage = () => {
    if (textarea.value.trim() === '') {
        return;
    }
    const socket = chatStor.state.socket;
    const message = {
        senderId: parseInt(localStorage.getItem("userId")),
        receiverId: chatStor.state.currentContact.userOther,
        text: textarea.value,
        type: "user_message",
    };
    socket.send(JSON.stringify(message));
    textarea.value = '';
}
</script>

<style scoped>

.chat-input{
    width: 1015px;
    height: 120px;
    margin-left: -20px;
    position: relative; 
}
.file-icon{
    position: absolute;
    top: 5px;
    left: 10px; 
    cursor: pointer;
    color: #999;
    transition: color 0.3s;
    z-index: 1; 
}
</style>